<template>
    <div>
        <el-menu
                active-text-color="#ffd04b"
                background-color="#545c64"
                default-active="1"
                text-color="#fff">

            <!-- 一级菜单 -->
            <template v-for="item in list">
                <el-submenu :index="item.path" :key="item.path" v-if="item.children && item.children.length">
                    <template slot="title"><i :class="item.icon"></i><span>{{item.name}}</span></template>

                    <!-- 二级菜单 -->
                    <template v-for="itemChild in item.children">
                        <el-submenu :index="itemChild.path" :key="itemChild.path" v-if="itemChild.children && itemChild.children.length">
                            <template slot="title"><i :class="itemChild.icon"></i><span>{{itemChild.name}}</span></template>

                            <!-- 三级菜单 -->
                            <el-menu-item :index="itemChild_Child .path" :key="itemChild_Child.path" v-for="itemChild_Child in itemChild.children">
                                <i :class="itemChild_Child.icon"></i><span slot="title">{{itemChild_Child.name}}</span></el-menu-item>
                        </el-submenu>

                        <el-menu-item :index="itemChild.path" :key="itemChild.path" v-else><i :class="itemChild.icon"></i><span slot="title">{{itemChild.name}}</span></el-menu-item>
                    </template>
                </el-submenu>

                <el-menu-item :index="item.path" :key="item.path" v-else><i :class="item.icon"></i><span slot="title">{{item.name}}</span></el-menu-item>
            </template>

        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "Nav2",
        data() {
            return {
                list: [
                    {
                        path: "/1",
                        name: "导航一",
                        icon: "el-icon-menu",
                        children: [
                            {
                                path: "/1/1",
                                name: "导航1-1",
                                icon: "el-icon-menu",
                                children: [
                                    {
                                        path: "/1/1/1",
                                        name: "导航1-1-1",
                                        icon: "el-icon-menu",
                                    },
                                    {
                                        path: "/1/1/2",
                                        name: "导航1-1-2",
                                        icon: "el-icon-menu",
                                    },
                                    {
                                        path: "/1/1/3",
                                        name: "导航1-1-3",
                                        icon: "el-icon-menu",
                                    }
                                ]
                            },
                            {
                                path: "/1/2",
                                name: "导航1-2",
                                icon: "el-icon-menu",
                            }
                        ]
                    },
                    {
                        path: "/2",
                        name: "导航二",
                        icon: "el-icon-menu"
                    }
                ]
            }
        }
    }
</script>

<style scoped>

</style>
